<template>
	<view class="shouhou" v-if="data">
		
		<view class="title">
			{{data?data.orderStatusName:''}}
		</view>
		<view class="box">
			<view class="box-title">售后商品</view>
			<view class="item" v-for="(item,index) in data.goodsList" :key="index">
				<image :src="item.picUrl" mode="aspectFill"></image>
				<view class="item-box">
					<view class="item-box-view">{{item.goodsName}}</view>
					<view class="item-box-view1">规格：{{item.specifications[0]}}</view>
					<view class="item-box-view2">
						<text class="item-box-view2-text">￥{{item.price}}</text>
						<text class="item-box-view2-text1">x{{item.number}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-item">
				<view class="box-item-left">申请原因</view>
				<view class="box-item-right">
					<text>{{data.afterSaleDescribe}}</text>
					<image src="../../static/xiayibu@2x.png" mode=""></image>
				</view>
			</view>
			
			<view class="box-item1">
				<view class="box-item1-title">收货状态</view>
				<view class="box-item1-content">
					<view :class="zhuangtaiListIndex===index?'active-box-item1-content-child' : 'box-item1-content-child'" v-for="(item,index) in zhuangtaiList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
			
			<view class="box-item1">
				<view class="box-item1-title">我需要</view>
				<view class="box-item1-content">
					<view :class="xuyaoListIndex===index?'active-box-item1-content-child' : 'box-item1-content-child'" v-for="(item,index) in xuyaoList" :key="index" >
						{{item.name}}
					</view>
				</view>
			</view>
			
			<view class="jine">退款金额   ￥{{data?data.actualPrice:0}}</view>
			<view class="kong" v-if="data.orderStatus == 11">
				<view class="jijian">
					<view class="jijian-left">寄件地址</view>
					<view class="jijian-left">{{dizhiData?dizhiData.remarks : ''}}</view>
				</view>
				<view class="addr">
					<view class="addr-left">
						<view class="addr-left-name">
							<text>{{dizhiData?dizhiData.name : ''}}</text>
							<text>{{dizhiData?dizhiData.phone : ''}}</text>
						</view>
						<view class="addr-left-address">
							<view class="address-content">
								{{dizhiData?dizhiData.address : ''}}
							</view>
						</view>
					</view>
					<image class="addr-image" src="../../static/xiayibu@2x.png" mode=""></image>
				</view>
				<view class="box-item" @click="show = true">
					<view class="box-item-left">物流名称</view>
					<view class="box-item-right">
						<text>{{shipName?shipName : '请选择'}}</text>
						<image src="../../static/xiayibu@2x.png" mode=""></image>
					</view>
				</view>
				<view class="danhao">
					<input type="text" placeholder="请填写退回商品物流单号" placeholder-color="#333333" v-model="shipSn">
				</view>
			</view>
			
		</view>
		
		<view class="box-btn" v-if="data.orderStatus == 11">
			<view class="btn" @click="handleshangchuandanhao">
				上传单号
			</view>
		</view>
		<view class="box-btn" v-if="data.orderOperator.showReturnLogistics">
			<view class="btn" @click="handlewuliu">
				查看物流
			</view>
		</view>
		<u-select v-model="show" mode="single-column" :list="list" confirm-color="#333333" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhuangtaiList:[{
					name:'我已收到商品',
					type:1
				},{
					name:'暂未收到商品',
					type:2
				}],
				zhuangtaiListIndex:0,
				xuyaoList:[{
					name:'仅退款',
					type:1
				},{
					name:'退货退款',
					type:2
				}],
				xuyaoListIndex:0,
				shipSn:'',
				shipName:'',
				shipCode:'',
				orderId:'',
				data:'',
				show:false,
				list:[],
				dizhiData:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getorderDetails()
			this.getwuliu()
			this.getwuliudizhi()
		},
		methods: {
			//物流地址
			async getwuliudizhi(){
				const res = await this.$u.api.getReturnAdress()
				this.dizhiData = res.data
			},
			//物流信息
			async getwuliu(){
				const res = await this.$u.api.getAllShipChannelCode()
				this.list = res.data
				this.list.forEach((v=>{
					v.value = v.code
					v.label = v.name
				}))
			},
			//订单详情
			async getorderDetails(){
				const params = {
					orderId:this.orderId
				}
				const res = await this.$u.api.orderDetails(params)
				this.data = res.data
				if (res.data.applyAfterSaleType == 1) {
					this.xuyaoListIndex = 0
				}else{
					this.xuyaoListIndex = 1
				}
				if (res.data.applyAfterSaleTakeType == 1) {
					this.zhuangtaiListIndex = 0
				}else{
					this.zhuangtaiListIndex = 1
				}
			},
			//确定物流
			confirm(data){
				console.log(data)
				this.shipCode = data[0].value
				this.shipName = data[0].label
			},
			//上传单号
			async handleshangchuandanhao(){
				if (!this.shipCode) {
					this.$u.toast('请选择物流名称')
					return
				}
				if (!this.shipSn) {
					this.$u.toast('请上传物流单号')
				}
				const param = {
					orderId:this.orderId,
					shipCode:this.shipCode,
					shipSn:this.shipSn
				}
				const res = await this.$u.api.uploadReturnLogistics(param)
				this.$u.toast(res.msg)
				this.getorderDetails()
				uni.requestSubscribeMessage({
					tmplIds: ['bejIdrTnVq71T23vUXnqghnnWfS7U6ui3qptsE15pVM'],
					complete: (res) => {
						console.log(res,'999');
					
					}
				})
			},
			//查看物流
			handlewuliu(){
				const params = 'orderId=' + this.orderId
				uni.navigateTo({
					url:'/pages/tuihuowuliu/tuihuowuliu?' + params
				})
			},
		}
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
	.title{
		padding: 56rpx 28rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
    .box{
		padding: 28rpx;
		background: white;
	}
	.box-title{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 32rpx;
	}
	.item{
		margin-top: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.item image{
		width: 204rpx;
		height: 204rpx;
	}
	.item-box{
		flex: 1;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.item-box-view{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.item-box-view1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.item-box-view2{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.item-box-view2-text{
		font-size: 32rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #5D22BA;
		line-height: 38rpx;
	}
	.item-box-view2-text1{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.box-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 28rpx;
        border-bottom: 0.5px solid #E3E3E3;
	}
	.box-item-left{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box-item-right text{
		margin-right: 24rrpx;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item-right image{
		width: 36rpx;
		height: 36rpx;
	}
	.box-item1{
		padding: 28rpx 0rpx;
		border-bottom: 0.5px solid #E3E3E3;
	}
	.box-item1-title{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item1-content{
		padding: 28rpx 32rpx 0rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.box-item1-content-child{
		width: 286rpx;
		height: 84rpx;
		border: 1px solid #5D22BA;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #5D22BA;
		line-height: 84rpx;
		text-align: center;
	}
	.active-box-item1-content-child{
		width: 286rpx;
		height: 84rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 84rpx;
		text-align: center;
	}
	.jine{
		padding: 32rpx 0rpx 50rpx 0rpx;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.danhao{
		padding: 30rpx 20rpx;
		background: #F4F4F4;
		border-radius: 4px 4px 4px 4px;
		margin-bottom: 180rpx;
	}
	.danhao input{
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.kong{
		width: 100%;
		margin-bottom: 180rpx;
	}
	.box-btn{
		padding: 10rpx 28rpx 0rpx 28rpx;
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
        border-top: 0.5px solid #E3E3E3;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}
	.btn{
		width: 694rpx;
		height: 84rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
	}
	
	.jijian{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: SF Pro Text-Bold, SF Pro Text;
		font-weight: 400;
		color: #333333;
		line-height: 38rpx;
	}
	.addr{
		padding: 24rpx 0rpx;
		background: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	    border-bottom: 0.5px solid #E3E3E3;
		margin-bottom: 28rpx;
	}
	.addr-left{
		
	}
	.addr-left-name{
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		font-family: SF Pro Text-Bold, SF Pro Text;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
	.addr-left-name text{
		margin-right: 8rpx;
	}
	.addr-left-address{
		margin-top: 22rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.moren{
		width: 60rpx;
		height: 32rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 2px 2px 2px 2px;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
		margin-right: 16rpx;
	}
	.address-content{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 32rpx;
	}
	.addr-image{
		width: 48rpx;
		height: 48rpx;
	}
</style>
